<style scoped>
.dashboard {
    /* background: url("../assets/Bitmap.png") no-repeat !important; */
    background: rgba(255, 255, 255, .7) !important;
    background-size: 100% 100%!important;
}

.datePicker {
    background: rgba(255, 255, 255, .7);
}

.dashboardContainer {
    position: relative;
}
</style>

<template>
    <div class="dashboardContainer">
        <date @pick="getDateFromPicker" 
        class="datePicker"
        :sendMaxDateToPicker="sendMaxDate"
        >
        </date>
        <div :id="name" 
        style="width:500px;height:400px;" 
        class="dashboard">
        </div>
    </div>
</template>
<script>
import top from './header';
import date from "./datePicker";
import { Loading } from 'element-ui';
import { MessageBox } from 'element-ui';

var echarts = require("echarts/lib/echarts");
require('echarts/lib/chart/bar/');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title')
export default {
    data() {
        return {
            lists: null,
            data: {
            },
            option: {},
            myChart: null,
            time: null,
            selectedDate: null,
            ele: null,
            loading: true,
            loadingInstance: null,
            trueTimer: null,
            today: new Date().format("yyyy-MM-dd")
        }
    },
    props: {
        name: null,
        sendMaxDate:null
    },
    components: {
        date: date
    },
    mounted: function() {
        this.loadingInstance = Loading.service({
            target: "#" + this.name,
        })
        
        this.time = this.sendMaxDate || this.today
        
        console.log(this.time)
        // this.time = "2017-08-01"
        this.$http.jsonp('http://192.168.100.139:8787/time/' + this.time, { emulateJSON: true }, {
            headers: {
            },
        }).then(function(response) {
            this.loadingInstance.close();
            // 这里是处理正确的回调
            this.lists = response.data[0]
            this.draw();
            if (!response.data[0]) {
                this.$emit("noData", false)
                clearInterval(this.trueTimer);
                this.trueTimer = null;
                MessageBox({
                    type: 'warning',
                    message: '没有查询到今天的数据,请联系服务商,或者选择其他时间'
                });
            } else {
                this.trueTimer = setInterval(() => {
                    this.init(this.today);
                }, 10000)
            };

        }, function(err) {
            console.log(err)
        });

    },
    methods: {
        getDataX() {
            this.data.xAxis = [];
            for (var key in this.lists) {
                this.data.xAxis.push(key)
            }
        },
        changeOption() {
            if (this.lists){
                 this.getDataX();
                  this.option = {
                    title: { text: this.time + "会员数量", x: '20%', y: "2%" },
                    tooltip: {},
                    xAxis: {
                        data: this.data.xAxis
                    },
                    yAxis: {},
                    series: [{
                        name: 'FTB',
                        type: 'bar',
                        stack: "count",
                        data: [this.lists.FTB],
                    },
                    {
                        name: 'activemember',
                        type: 'bar',
                        stack: "count",
                        data: [,
                            this.lists.activemember,
                            ,
                        ],
                    }, {
                        name: 'sleepmember',
                        type: 'bar',
                        stack: "count",
                        data: [,
                            ,
                            this.lists.sleepmember,
                        ],
                    }, {
                        name: 'unstablemember',
                        type: 'bar',
                        stack: "count",
                        data: [,
                            ,
                            ,
                            this.lists.unstablemember],
                    }
                    ]
                }
            }
        },
        draw() {
            this.ele = document.getElementById(this.name)
            this.ele.style.width = "100%"
            this.ele.style.height = "100%"
            this.myChart = echarts.init(this.ele);
            // 绘制图表
           
            this.changeOption();
            this.myChart.setOption(this.option);
        },
        getDateFromPicker(msg) {
            this.selectedDate = msg;
            this.$emit("picked", msg);
        },
        resize() {
            this.myChart.resize();
        },
        init(time) {
            this.$http.jsonp('http://192.168.100.139:8787/time/' + time + "?index=" + (+new Date()), { emulateJSON: true }, {
                headers: {
                },
            }).then(function(response) {
                if (this.loadingInstance) this.loadingInstance.close();
                // 这里是处理正确的回调
                if (!response.data[0]) {
                    clearInterval(this.trueTimer);
                    this.trueTimer = null;
                    this.$emit("noData", false);
                    return MessageBox({
                        type: 'warning',
                        message: '没有查询到该日数据'
                    });
                };
                this.lists = response.data[0];
                this.changeOption();
                this.myChart.setOption(this.option)
            }, function(err) {
                console.log(err)
            });
        },
        loop() {
            this.init(this.today)
            this.trueTimer = setInterval(() => {
                this.init(this.today);
                console.log(this.today);
            }, 10000)
        },
    },

    watch: {
        selectedDate: {
            handler() {
                clearInterval(this.trueTimer);
                this.trueTimer = null;
                this.loadingInstance = Loading.service({
                    target: "#" + this.name,
                })
                if (this.selectedDate)
                    this.time = this.selectedDate.format("yyyy-MM-dd");
                this.init(this.time)
            }
        }
    }
}

</script>
